<template>
    <div class="container">
        <div class="header">
            <div class="group">
                <Button type="success" class="output-btn">数据导出</Button>
                <Input search placeholder="请输入证件号" style="margin-right: 10px; width: 200px;" />
                <DatePicker type="date" multiple placeholder="选择开始时间" style="width: 200px; margin-right: 5px;"></DatePicker>
                <DatePicker type="date" multiple placeholder="选择结束时间" style="width: 200px; margin-right: 10px;"></DatePicker>
            </div>
            <div class="total-num">总记录: 551条</div>
        </div>
        <!--<div class="op-frame">-->
            <!---->
        <!--</div>-->
        <div class="content">
            <Table width="100%" height="auto" border :columns="columns2" :data="data4"></Table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns2: [
        {
          title: '状态',
          key: 'staus',
          width: 100,
          align: 'center',
          fixed: 'left',
          filters: [
            {
              label: '待提报',
              value: '待提报'
            },
            {
              label: '已提报',
              value: '已提报'
            },
            {
              label: '已审核',
              value: '已审核'
            },
            {
              label: '待审核',
              value: '待审核'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '待提报') {
              return row.staus === '待提报'
            } else if (value === '已提报') {
              return row.staus === '已提报'
            } else if (value === '已审核') {
              return row.staus === '已审核'
            } else if (value === '待审核') {
              return row.staus === '待审核'
            }
          }
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 100,
          align: 'center',
          filters: [
            {
              label: '男',
              value: '男'
            },
            {
              label: '女',
              value: '女'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '男') {
              return row.sex === '男'
            } else if (value === '女') {
              return row.sex === '女'
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '证件类型',
          key: 'card_type',
          align: 'center',
          width: 150
        },
        {
          title: '证件号',
          key: 'card_no',
          align: 'center',
          width: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          width: 150
        },
        {
          title: '样品来源',
          key: 'yply',
          align: 'center',
          width: 150
        },
        {
          title: '采样日期',
          key: 'cyqq',
          align: 'center',
          width: 150
        },
        {
          title: '采样次数',
          key: 'cycs',
          align: 'center',
          width: 150,
          sortable: true
        },
        {
          title: '检验结果',
          key: 'jyjg',
          align: 'center',
          width: 150
        },
        {
          title: '收治处置',
          key: 'szcz',
          align: 'center',
          width: 150
        },
        {
          title: '异常信息',
          key: 'ycxx',
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          align: 'center',
          key: 'action',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提报'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '审批'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '发布')
            ])
          }
        }
      ],
      data4: [
        {
          staus: '待提报',
          name: '关红',
          sex: '女',
          age: '53',
          card_type: '身份证',
          card_no: '210102196705121828',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '邱东',
          sex: '男',
          age: '35',
          card_type: '身份证',
          card_no: '210111198512191518',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '徐丽',
          sex: '女',
          age: '42',
          card_type: '身份证',
          card_no: '210124197803212064',
          tel: '13025439990',
          yply: '大东区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已审核',
          name: '丁永允',
          sex: '男',
          age: '40',
          card_type: '身份证',
          card_no: '370811198012054018',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '吕健',
          sex: '男',
          age: '35',
          card_type: '身份证',
          card_no: '210106198508045816',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '郭秋含',
          sex: '女',
          age: '20',
          card_type: '身份证',
          card_no: '210103199908263023',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已审核',
          name: '肖煜瀚',
          sex: '男',
          age: '19',
          card_type: '身份证',
          card_no: '210102200011066616',
          tel: '',
          yply: '和平区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '段馨驰',
          sex: '女',
          age: '27',
          card_type: '身份证',
          card_no: '210104199305290928',
          tel: '',
          yply: '和平区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '陈艳丽',
          sex: '女',
          age: '64',
          card_type: '身份证',
          card_no: '210105195601033342',
          tel: '',
          yply: '皇姑区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院',
          ycxx: '无'
        },
        {
          staus: '待审核',
          name: '赵婷婷',
          sex: '女',
          age: '23',
          card_type: '身份证',
          card_no: '220822199704071721',
          tel: '',
          yply: '皇姑区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '安东',
          sex: '男',
          age: '32',
          card_type: '身份证',
          card_no: '210122198903180313',
          tel: '',
          yply: '浑南区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '徐业华',
          sex: '男',
          age: '58',
          card_type: '身份证',
          card_no: '210103196207231852',
          tel: '',
          yply: '浑南区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '柳成林',
          sex: '男',
          age: '26',
          card_type: '身份证',
          card_no: '130105199411211513',
          tel: '',
          yply: '沈河区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待已审核',
          name: '陈秀英',
          sex: '女',
          age: '62',
          card_type: '身份证',
          card_no: '11010619581108324X',
          tel: '',
          yply: '沈河区',
          cyqq: '2020-03-25',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '魏世雄',
          sex: '男',
          age: '79',
          card_type: '身份证',
          card_no: '440301194102087817',
          tel: '',
          yply: '沈河区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '李雨桐',
          sex: '女',
          age: '35',
          card_type: '身份证',
          card_no: '220102198511154825',
          tel: '130****9990',
          yply: '市疾控中心',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已审核',
          name: '文忆',
          sex: '女',
          age: '6',
          card_type: '身份证',
          card_no: '210113201308060569',
          tel: '',
          yply: '沈北新区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '沈忠权',
          sex: '男',
          age: '54',
          card_type: '身份证',
          card_no: '210122196701274515',
          tel: '',
          yply: '辽中区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '已提报',
          name: '赵丽敏',
          sex: '女',
          age: '45',
          card_type: '身份证',
          card_no: '210123197602231246',
          tel: '',
          yply: '康平县',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '刘华炎',
          sex: '男',
          age: '20',
          card_type: '身份证',
          card_no: '210124200004153437',
          tel: '',
          yply: '法库县',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '腾宗梅',
          sex: '女',
          age: '57',
          card_type: '身份证',
          card_no: '210102196301236645',
          tel: '',
          yply: '大东区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        },
        {
          staus: '待提报',
          name: '卢思瑶',
          sex: '女',
          age: '19',
          card_type: '身份证',
          card_no: '210102200109074120',
          tel: '',
          yply: '和平区',
          cyqq: '2020-03-27',
          cycs: '1',
          jyjg: '阴性',
          szcz: '四院北院区',
          ycxx: '无'
        }]
    }
  }
}
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .op-frame {
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        display: flex;
    }
    .group {
        display: flex;
    }
    .output-btn {
        margin-right: 10px;
    }
</style>
